    <style>

      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width:100%;
        height:80%;
        text-align: center;
      }
    </style>

 <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/jquery.cleditor.css" />


<div class="container">



	<div class="jumbotron jumbo-pulli">
		<div id="owl-demo" class="owl-carousel owl-theme">
		 
		  <div class="item"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/slidecolegial.png" alt="The Last of us"></div>
		 
		</div>
		<div class="jumbo-bottom">
		<div class="row">
			<div class="col-lg-2 col-sm-3 jumbo-sn">
				<a href="https://www.facebook.com/industrias.pulli" target="_blank"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/Facebook.png" alt=""></a>
				<a href="https://twitter.com/pulli_in" target="_blank"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/Twitter.png" alt=""></a>
				<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/Flickr.png" alt="">
				<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/Pinterest.png" alt="">
			</div>
			<div class="col-lg-10 col-sm-9"><div class="jumbo-bar"></div></div>
		</div>
		</div>
	</div>

<?php
$tipocategorias=TipoCategoria::model()->findAllByAttributes(array('tipo_id'=>4));
//var_dump($tipocategorias);
?>

<!-- Botones para filtrar 
<div class="row"> 

<div align="center">
<?php foreach ($tipocategorias as $tipcat): ?>

<?php 
  $categoria=Categoria::model()->findByAttributes(array('categoria_id'=>$tipcat->categoria_id));
?>
  <button class="btn btncat btn-large btn-success btn-<?php echo $categoria->nombre; ?>" type="button"> 
    <?php echo $categoria->nombre; ?>
  </button>
<?php endforeach; ?>
</div>

</div>
-->


<?php $criteria = new CDbCriteria();
      $criteria->join="INNER JOIN tipo_categoria as tc ON (tc.tipo_categoria_id=t.tipo_categoria_id)";
      $criteria->condition='tipo_id=4';
?>

<?php $items=Item::model()->findAll($criteria);
//var_dump($items);
?>

<div class="row">
<?php foreach ($items as $ite): ?>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail thumbnail-pulli">
      <h4><?php echo $ite->nombre . "</br>" ; ?></h4>
      <img id="imagen" width="262px" src=" <?php echo Yii::app()->request->baseUrl; ?>/<?php echo $ite->img_url1 ?>">
      <div>
		<?php $refs=Ref::model()->findAllByAttributes(array('producto_id'=>$ite->producto_id)); ?>
		
		<div class="colorbox" id="<?php echo($ite->item_id) ?>">
		<?php foreach ($refs as $ref): ?>
			<?php $color=Color::model()->findByAttributes(array('color_id'=>$ref->color_id));  ?>
			<span class="color_preview" value="talla-<?php echo($ref->ref_id) ?>" style="background-color:<?php echo  $color->html_color ?>"> </span>
		<?php endforeach; ?>
		<div class="tallasbox" id="tallas-<?php echo($ite->item_id) ?>">
		 <?php foreach ($refs as $ref): ?>
		 <?php $talla_ref=TallaRef::model()->findAllByAttributes(array('ref_id'=>$ref->ref_id)); ?>

			<div class="tallas" id="talla-<?php echo($ref->ref_id) ?>">
        <div>REF: <?php echo($ref->cod) ?></div>
        <div>Tallas:
			<?php foreach ($talla_ref as $tal_ref): ?>
				<?php $talla=Talla::model()->findByAttributes(array('talla_id'=>$tal_ref->talla_id)); ?>
				<span class="badge badge-pulli">
				<?php echo $talla->nombre; ?>
				</span>
			<?php endforeach; ?>
      </div>
			</div>
		<?php endforeach; ?>
		</div>

		</div>

      </div> 

        <span class="description-item">
          <p><?php echo $ite->descripcion; ?></p>
        </span>

    </div>
  </div>
<?php endforeach; ?>



</div>








<script>

$(document).ready(function() {

  $(".tallas").hide();
  $(".tallasbox :first-child").show();
  $(".colorbox :first-child").addClass("color-active");

  $( ".color_preview" ).click(function() {


    tallaid=$(this).attr('value');
    tallaclass= "#"+tallaid;

    //Padre
    itemid= $(this).closest('div').attr('id');

    $("#"+itemid+".colorbox > .color_preview").removeClass("color-active")

    $(this).addClass("color-active");

    
    tallasidclass="#tallas-"+itemid+"> .tallas";
    //alert(tallasidclass);
    //alert(tallaclass);
    $(tallasidclass).hide(); 
    $(tallaclass).show();
  });


 
  $("#owl-demo").owlCarousel({
 
    autoPlay : 9000,
    stopOnHover : true,
    navigation:false,
    paginationSpeed : 1000,
    goToFirstSpeed : 2000,
    singleItem : true,
    autoHeight : true,
    transitionStyle:"fade"
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });


  });
  </script>
